<template>
  <div class="login">
      <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span class="log">后台管理系统</span>
    
  </div>
  <el-form label-width="80px" :model="form" ref="form">
        <el-form-item label="用户名" prop="username"
        :rules="rules.username"
        >
            <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password"
        :rules="rules.password"
        >
            <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item >
           <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
        </el-form>
</el-card>
        
  </div>
</template>

<script>

import {nameRule,passRule} from '../utils/vaildate'
import {setToken} from '../utils/setToken'
import {login} from '../api/api'
export default {
    name:'LoginName',
    data() {
        return {
            form:{
                username: '',
                password: '',
            },
            rules:{
                username:[{validator:nameRule,trigger:'blur'}],
                password:[{validator:passRule,trigger:'blur'}]
            }
        }
    },
    methods: {
        login(form){
            this.$refs[form].validate((valid) => {
          if (valid) {
            // this.service.post('/login',this.form).then((res)=>{
            //     console.log(res.data);
            //     if(res.data.status == 200){
            //         setToken('username',res.data.username)
            //         setToken('token',res.data.token)
            //         this.$message({message:res.data.message,type:'success'})
            //         this.$router.push('/home')

            //     }
            // })
            login(this.form).then(
                (res)=>{
                console.log(res.data);
                if(res.data.status == 200){
                    setToken('username',res.data.username)
                    setToken('token',res.data.token)
                    this.$message({message:res.data.message,type:'success'})
                    this.$router.push('/home')

                }
            }
            )
            
          } else {
            console.log(this.form,'dddd');
            return false;
          }
         })
        }
    },
}
</script>

<style lang="scss">
.login{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('../assets/bg.jpg') center;
    .box-card{
        width: 450px;
        margin: 200px auto;
        background-color: rgb(240, 241, 243);
        .el-card__header{
            font-size: 34px;
        }
        .el-button{
            width: 100%;
           
        }
    }
}
.log{
    margin-left: 100px;
}
</style>